<template>
  <div id="app">
    <div class="bb">
      <ul>
        <div class="box">
          <tab></tab>
        </div>

        <li @click="fenlei(1)" :class='b==1?"on":""'>
          <p >首页</p>
        </li>
        <li @click="fenlei(2)" :class='b==2?"on":""'>
          <p >同城</p>
        </li>
        <li @click="fenlei(3)" :class='b==3?"on":""'>
          <p >礼拜五</p>
        </li>
        <li @click="fenlei(4)" :class='b==4?"on":""'>
          <p >积分商城+</p>
        </li>
        <li>
          <p>导航+</p>
        </li>
      </ul>
    </div>
    <!--:is实现多个组件实现同一个挂载点-->
    <component :is="currentView"></component>
  </div>
</template>

<script>
import tab from '@/components/tabs/tab.vue';



export default {
  name: 'TopNav',
  data() {
    return {
      active: 0,
      currentView: 'tab',
      b:1,
    };
  },
  methods: {
    toggle(i, v) {
      this.active = i;
      this.currentView = v;
    },
    fenlei(index){
      this.b=index
      if(index==1){
        this.$router.push({path:'/'});
        this.$store.commit('shuaxin',1)
        this.b=index

      }else if(index==2){
        this.$router.push({path:'/local'});
        this.$store.commit('shuaxin',2)
        this.b=index
      }else if(index==3){
        this.$router.push({path:'/fri'});
        this.$store.commit('shuaxin',3)
        this.b=index
      }else if(index==4){
        this.$router.push({path:'/integral'});
        this.$store.commit('shuaxin',4)
        this.b=index
      }
      console.log(index,this.b)
    },
  },
  components: {
    tab,
  },
  created(){
      this.b = this.$store.state.b
  }
};
</script>

<style scoped>
.on{
  background: #f08200;
  color: #fff;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ul {
  width: 130px;
  display: flex;
  margin: 0 auto;
}

li {
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.box {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 170px;
}

.aa {
  width: 150px;
  height: 50px;
  background: rgb(240, 130, 0);
  color: #fff;
}
.bb {
  position: relative;
}
.bb > ul {
  width: 1300px;
}
</style>
